<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/common/header.jsp"%>

<style type="text/css">

.table ul li span{
	display: inline-block;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	float:left;
}

.table ul li {
	width: 100%;
	list-style: none outside none;
	display: block;
}

.table ul {
	display: block;
	height: 40px;
}


.table {
	line-height: 2.5;
	height: 500px;
}

div.table ul.table_header {
	background-color: rgb(51, 103, 153);
	color: #ffffff;
	text-align: center;
}

div.table ul.table_header li.table_li span.table_number {
	width: 100px;
}

div.table ul.table_header li.table_li span.table_title {
	width: 430px;
}

div.table ul.table_header li.table_li span.table_name {
	width: 150px;
}

div.table ul.table_header li.table_li span.table_create_date {
	width: 180px;
}

div.table ul.table_header li.table_li span.table_view {
	width: 80px;
}

div.table ul.table_header li.table_li span.table_recommend {
	width: 80px;
}

div.table ul.table_content li.table_li span.table_number {
	width: 100px;
	text-align: center;
}

div.table ul.table_content li.table_li .table_title {
	width: 430px;
}


div.table ul.table_content li.table_li .table_name {
	width: 150px;
	text-align: center;
}


div.table ul.table_content li.table_li .table_create_date {
	width: 180px;
	text-align: center;
}


div.table ul.table_content li.table_li .table_view {
	width: 80px;
	text-align: center;
}


div.table ul.table_content li.table_li .table_recommend {
	width: 80px;
	text-align: center;
}

div.table ul.table_content li.table_li span.table_title:HOVER {
	background-color: #999999;
}

div.footer div ul.page_ul li.page_li {
	display: inline-block;
}

div.footer div ul.page_ul li.page_li button.select {
	background-color: #dbdbdb;
}

div.footer div ul.page_ul li.page_li button.normal {
	background-color: #ffffff;
}

div.footer div ul.page_ul {
	text-align: center;
}

div.board div.bottom_btn {
	float: right;
}

div.board {
	height: 550px;
}

</style>

<div class="container">
	<div class="content">
		<article>
			<div class="board" >
				<div class="table" id="table">
					
				</div>
				<div class="footer" id="footer">
					
				</div>
				<div class="bottom_btn">
					<button id="write_content">글쓰기</button>
				</div>
			</div>
		</article>
	</div>
</div>

<script type="text/javascript">

	function init() {
		ControlPage.goPage();
		addActionListener();
	}
	
	function addActionListener() {
		jQuery('#write_content').on('click', writeBtnHandler);
	}
	
	function writeBtnHandler() {
		goWritePage();
	}
	
	function goWritePage() {;
		document.location.href = '${initParam.base_path}/jsp/board/write.jsp';
	}
	
	function proccessContentList(resp) {
		
		var jsontext = JSON.parse(resp.jsonString);
		var content = jsontext.content_list;
		var total_rows = jsontext.total_rows;
		
		var table_header = '<ul class=\"table_header\">' +
								'<li class="table_li">' +
									'<span class="table_number">글번호</span>' +
									'<span class="table_title">제목</span>' +
									'<span class="table_name">작성자</span>' +
									'<span class="table_create_date">작성일</span>' +
									'<span class="table_view">조회</span>' +
									'<span class="table_recommend">추천</span>' +
								'</li>' +
							'</ul>';
			
		var template = 	'<ul class=\"table_content\">' +
							'<li class=\"table_li\" id=\"{write_id}\">' +
								'<span class=\"table_number\">{write_id}</span>' +
								'<span class=\"table_title\">{title}</span>' +
								'<span class=\"table_name\">{name}</span>' +
								'<span class=\"table_create_date\">{create_date}</span>' +
								'<span class=\"table_view\">{view}</span>' +
								'<span class=\"table_recommend\">{recommend}</span>' +
							'</li>' +
						'</ul>';
						
		var table = document.getElementById('table');
		table.innerHTML = table_header;
		
		for(var i = 0, len = content.length; i < len; i++) {
			table.innerHTML += template.replace(/{write_id}/, content[i].write_id).replace(/{write_id}/, content[i].write_id).
					replace(/{title}/, content[i].title).replace(/{name}/, content[i].name).replace(/{create_date}/, content[i].create_date).
					replace(/{view}/, content[i].view).replace(/{recommend}/, content[i].recommend);
		}
		
		var footer = document.getElementById('footer');
		footer.innerHTML = '';
		
		var paging = document.createElement('div');
		paging.setAttribute('class', 'paging');
		
		var total_page = Math.ceil(parseFloat(total_rows) / parseFloat('10'));
		var number_list = '';
		var number_template = '<li class="page_li"><button class="{state}">{number}</button></li>';
		
		for(var i = 1; i < total_page + 1; i++) {
			if(Number(ControlPage.page) === i) {
				number_list += number_template.replace(/{state}/, 'select').replace(/{number}/, i);
			} else {
				number_list += number_template.replace(/{state}/, 'normal').replace(/{number}/, i);
			}
		}
				
		paging.innerHTML = '<ul class="page_ul">' + number_list + '</ul>';
		footer.appendChild(paging);
		
		//동적으로 생성된 거라서 나중에 이벤트 걸어야 됨
		jQuery('#table > .table_content > li > .table_title').on('click', function(){
			var row_id = jQuery(this).parent().attr('id');
			clickTitleHandler(row_id);
		});
		
		jQuery('#footer > div > .page_ul > .page_li > button').on('click', function() {
			clickPageHandler(this.innerHTML);
		});
	}
	function getContentList(startRow, viewRow) {
		var url = '${initParam.base_path}/board.action?method=getContentList';
		jQuery.post(url, {startRow: startRow, viewRow: viewRow}, proccessContentList);
	}
	
	function clickPageHandler(page_number) {
		ControlPage.page = page_number;
		ControlPage.goPage();
	}
	
	function clickTitleHandler(row_id) {
		document.location.href = '${initParam.base_path}/jsp/board/view.jsp?number=' + row_id;
	}
	
	var ControlPage = function(searchMethod) {
		this.page = 1, view_rows = 10;
		
		this.goPage = function() {
			searchMethod((this.page - 1) * view_rows, view_rows);
		};
	};
	
	var ControlPage = new ControlPage(getContentList);
	
</script>

<%@ include file="/common/footer.jsp"%>